<template>
  <view class="box">
    <image :src="require('@/static/image/my/06.png')" class="img"></image>
    <view class="list">
      <view class="item" :class="{'active':idx>=0}">
        <view class="item-icon" :class="{'item-height':idx >= 1}">
          <u-icon name="checkmark-circle-fill" color="#2979ff" size="50"></u-icon>
        </view>
        <view class="item-txt">
          同步智能评估分成功！
        </view>
      </view>
      <view class="item" :class="{'active':idx>=2}">
        <view class="item-icon" :class="{'item-height':idx >= 3}">
          <u-icon name="checkmark-circle-fill" color="#2979ff" size="50"></u-icon>
        </view>
        <view class="item-txt">
          传输资讯信息成功！
        </view>
      </view>
      <view class="item" :class="{'active':idx>=4}">
        <view class="item-icon" :class="{'item-height':idx >= 5}">
          <u-icon name="checkmark-circle-fill" color="#2979ff" size="50"></u-icon>
        </view>
        <view class="item-txt">
          验证资信信息通过！
        </view>
      </view>
      <view class="item" :class="{'active':idx>=6}">
        <view class="item-icon hide">
          <u-icon name="checkmark-circle-fill" color="#2979ff" size="50"></u-icon>
        </view>
        <view class="item-txt">
          智能匹配推荐成功！
        </view>
      </view>
    </view>
    <view class="btn">
      <u-button @click="handleToClick" ripple type="primary">立即拿钱</u-button>
    </view>
  </view>
</template>

<script>
var timer = null
export default {
  name: "recommend",
  data(){
    return{
      idx:-1,
      timer:null
    }
  },
  mounted() {
    // this.idx++
    timer = setInterval(()=>{
      this.idx++
      if(this.idx >= 6){
        clearInterval(timer)
      }
    },1000)
  },
  methods:{
    handleToClick(){
      clearInterval(timer)
      uni.redirectTo({
        url:'/pages/user/system'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  padding-top: 50rpx;
}
.img{
  display: block;
  margin: 0 auto 50rpx;
  width: 360rpx;
  height: 229rpx;
}
.list{
  width: 600rpx;
  margin: 0 auto;
  .item{
    display: flex;
    align-items: center;
    margin-bottom: 90rpx;
    opacity: 0;
    transition: opacity .5s;
    .item-icon{
      position: relative;
      margin-right: 40rpx;
      &::before{
        content: ' ';
        left: 50%;
        top: 50rpx;
        transform: translateX(-50%);
        position: absolute;
        width: 4rpx;
        height: 0rpx;
        transition: height .5s;
        background-color: #2979ff;
      }
    }
    .item-height{
      &::before{
        height: 100rpx;
      }
    }
    .hide{
      &::before{
        display: none;
      }
    }
    .item-txt{
      font-size: 30rpx;
    }
    &.active{
      opacity: 1;
    }
  }
}
.btn{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100rpx;
  width: 700rpx;
}
</style>
